<template>
	<view>
		<view>
			<view class="cu-bar bg-white">
				<view class="action border-title">
					<text class="text-xl text-bold text-black">{{ isEdit?"编辑":"添加"}}商品</text>
					<text class="bg-gradual-red" style="width:3rem"></text>
				</view>
				<view class="action">

				</view>
			</view>
			<form>
				<view class="cu-form-group text-right">
					<view class="title">商品标题</view>
					<input placeholder="请输入商品标题" name="input" v-model="row.title"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">商品分类</view>
					<picker @change="PickerChange" :value="index" :range="cateList" range-key="name" v-model="row.categoriesId">
						<view class="picker">
							{{index>-1?cateList[index].name:'禁止换行，超出容器部分会以 ... 方式截断'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">是否上架</view>
					<switch @change="SwitchA" :class="row.status==0?'checked':''" v-model="row.status" :checked="row.status==0?true:false"  name="status"></switch>
				</view>
				<view class="cu-bar bg-white">
					<view class="action">
						商品图片（首张为封面）
					</view>
					<view class="action">
						{{imgList.length}}/4
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						 <image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<textarea maxlength="-1" placeholder="请输入商品的简单介绍信息" v-model="row.content"></textarea>
				</view>
				
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-black lg" @tap="submit">保存</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	var _this;
	import { baseUrl } from "@/config/env";
	import { getToken } from "@/util/auth"
	import { add } from "@/api/content/commodity"
	export default {
		name: "detail",
		props: {
			isEdit: {
				type: Boolean,
				default: false
			},
			id: {
				type: String,
				default: null
			},
			cateList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				defaultValue:{
					
				},
				index: 0,
				picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
				imgList: [],
				switchA: false,
				input: "",
				modalName: "",
				row: {}
			}
		},
		created(e) {
			_this = this;
			if(_this.isEdit){
				//调用查询detail数据
			}
		},
		methods: {
			submit(){
				
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			SwitchA(e) {
				this.switchA = e.detail.value
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						//上传文件
						var tempFilePaths = res.tempFilePaths;
						for (var i in tempFilePaths){
							var index = parseInt(i);
							uni.showLoading({
								title: "上传中 "+(index+1)+"/"+tempFilePaths.length
							})
							var tempFile = tempFilePaths[index];
							uni.uploadFile({
								url: baseUrl + "blade-resource/oss/endpoint/put-file",
								filePath: tempFile,
								name: "file",
								header: {
									"Blade-Auth": 'bearer ' + getToken()
								},
								success: (uploadFileRes) => {
									var res = JSON.parse(uploadFileRes.data);
									var data = res.data;
									this.imgList.push(data.link);
									if(index === 0){
										_this.row.cover = data.name
									}
									if(index === tempFilePaths.length-1){
										uni.hideLoading();
									}
								}
							});
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
